<template>
<div>
    <Button type="primary" @click="Add=true">添加宠物</Button>
     <Button type="error" @click="removeAll">删除多行</Button>
    <Table border :columns="columns" :data="data"  @on-selection-change="onSelect"></Table>
   <!-- <Page :total="total" page-size='limit' show-sizer /> -->
   <!-- <Modal
        v-model="list"
        title="Common Modal dialog box title"
        @on-ok="ok"
         <Card :bordered="false">
                <p slot="title">Borderless card</p>
                <p>Content of card</p>
                <p>Content of card</p>
                <p>Content of card</p>
            </Card>
    </Modal> -->
   <Modal
        v-model="Add"
        title="数据操作"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate"  :label-width="80">
        <FormItem label="昵称" prop="petname">
            <Input v-model="formValidate.petname" placeholder="请输入昵称"></Input>
        </FormItem>
        <FormItem label="种类" prop="kind">
            <Input v-model="formValidate.kind" placeholder="请输入种类"></Input>
        </FormItem>
         <FormItem label="性别" prop="sex">
            <Input v-model="formValidate.sex" placeholder="输入您的性别"></Input>
        </FormItem>
        <FormItem label="年龄" prop="age">
            <Input v-model="formValidate.age" placeholder="输入您的年龄"></Input>
        </FormItem>
         <FormItem label="标题" prop="title">
            <Input v-model="formValidate.title" placeholder="请添加标题"></Input>
        </FormItem>
         <FormItem label="图片" prop="photo">
            <!-- <Input v-model="formValidate.photo" placeholder="请添加照片"></Input> -->
            <div>
        <div class="demo-avatar">
            <Avatar icon="ios-person" size="large" />
            
        </div>
    </div>
        </FormItem>
       
        
        
        
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    </Modal>
    
</div>

    
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    petname: '',
                    age: '',
                    kind:"",
                    sex:'',
                    _id:'',
                    title:'',
                    photo:''
                },
                dataMenu:{
                    petname: '',
                    age: '',
                    kind:"",
                    sex:'',
                    _id:'',
                    title:'',
                    photo:''
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'petname',
                        render: (h,  params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.petname)
                            ]);
                        }
                    },
                    {
                        title: '性别',
                        key: 'sex'
                    },
                    {
                        title: '种类',
                        key: 'kind'
                    },
                     {
                        title: '年龄',
                        key: 'age'
                    },
                     {
                        title: '编号',
                        key: '_id'
                    },
                     {
                        title: '标题',
                        key: 'title'
                    },
                     {
                        title: '图片',
                        key: 'photo'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            
                                            this.edit(params.row._id)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                     style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params)
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除'),
                                 h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params)
                                            // console.log(params.row.id)
                                            this.show(params.row._id)
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    }
                ],
                data: [],
                Add:false,
                ids:[]

            
            };
        },
        methods: {
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            ok () {
                this.$Message.info('Clicked ok');
               
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
             handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.formValidate._id){
                            this.axios({
                            url:`http://10.31.162.59:3000/encyclopedia/${this.formValidate._id}`,
                            method:'put',
                            data:this.formValidate
                        }).then(res=>{
                            this.Add = false
                             this.getData()
                        })
                        }else{
                            this.axios({
                            url:`http://10.31.162.59:3000/encyclopedia`,
                            method:'post',
                            data:this.formValidate
                        }).then(res=>{
                            this.Add = false
                             this.getData()
                        })
                        }

 

                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            edit(id) {
                // this.$Modal.info({
                //     title: 'User Info',
                //     content: `Name：${this.data[id].name}<br>Password：${this.data[id].password}`
                // })
                this.axios({
                    url:`http://10.31.162.59:3000/encyclopedia/${id}`,
                    method:'get'
                }).then(res=>{
                    this.formValidate=res.data
                    // console.log(formValidate)
                    this.Add = true;

                })
               
            },
            show(id) {
                 this.axios({
                    url:`http://10.31.162.59:3000/encyclopedia/${id}`,
                    method:'get'
                }).then(res=>{
                    // console.log(res.data)
                    this.dataMenu=res.data
                    // console.log(this.dataMenu)
                    // console.log(formValidate)
                    // console.log(id)
                    console.log(this.dataMenu.name)
                     this.$Modal.info({
                    title: '宠物详情',
                    content: `昵称：${this.dataMenu.petname}<br>
                    年龄：${this.dataMenu.age}<br>
                    种类:${this.dataMenu.kind}<br>
                    编号:${this.dataMenu._id}<br>
                    性别:${this.dataMenu.sex}<br>
                    标题:${this.dataMenu.title}<br>
                    图片:${this.dataMenu.photo0}`
                })
                   
                })
            },
            remove (id) {
               this.$Modal.confirm({
                    title: '确定操作',
                    content: '<p>你确定删除该信息吗？</p>',
                    onOk: () => {
                        this.axios({
                            url:`http://10.31.162.59:3000/encyclopedia/${id}`,
                            method:'delete'
                            }).then(res=>{
                                console.log(res)
                            this.getData()
                        });
                      
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });

            },
            getData(){
                this.axios({
                    url:`http://10.31.162.59:3000/encyclopedia`,
                   method:'get'
                }).then(res=>{
                    // console.log(res)
                    // this.total = res.data.total
                    this.data = res.data;
                })
            },
            onSelect(selections){
                // console.log(selection)
                var ids = []
                for(var i=0;i<selections.length;i++){
                    ids.push(selections[i]._id)
                    console.log(ids.toString())
                    this.ids = ids.toString();
                }
            },
            removeAll(){
                 this.$Modal.confirm({
                    title: '确定操作',
                    content: '<p>你确定删除该信息吗？</p>',
                    onOk: () => {
                        this.axios({
                            url:`http://10.31.162.59:3000/encyclopedia/${this.ids}`,
                            method:'delete',
                            data:{
                                ids:this.ids
                            }
                            }).then(res=>{
                                console.log(res)
                            this.getData()
                        });
                      
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });
            }
        },
        mounted(){
            this.getData();
        },
        watch:{
            Add(){
                if(!this.Add){
                    let[a,b,c,d,e,f] = ['','','','','','']
                    this.formValidate= {name:a,age:b,kind:c,sex:d,id:e,title:f} 
                }
            }
        }
    }
</script>

